<template>
  <div class="flex-1">
    <div>
      <el-row>
        <el-input
          size="mini"
          v-model="search.username"
          placeholder="请输入用户名"
          style="width: 200px"
        ></el-input>
        <el-button
          size="mini"
          type="primary"
          @click="fetch()"
        >搜索</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="newUserFormVisible=true"
        >新增用户</el-button>
        <!-- <el-button
          size="mini"
          type="primary"
        >删除用户</el-button> -->
      </el-row>
      <el-table
        :data="users"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column
          type="selection"
          width="50"
        >
        </el-table-column>
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="登录名"
        >
        </el-table-column>
        <el-table-column
          prop="displayname"
          label="用户名"
          width=""
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editUser(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              @click="deleteUser(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="search.currentpage"
        :page-size.sync="search.pagesize"
        layout="prev, pager, next, ->, total"
        :total="search.total"
        @size-change="fetch"
        @current-change="fetch"
        @prev-click="fetch"
        @next-click="fetch"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="新增用户"
      :visible.sync="newUserFormVisible"
      @close="cancelForm"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form-item
          label="登录名"
          prop="username"
        >
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item
          label="用户名"
          prop="displayname"
        >
          <el-input v-model="form.displayname"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input v-model="form.password"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click.native="newUserFormVisible=false">取 消</el-button>
        <el-button
          type="primary"
          @click.native="saveForm"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑用户信息"
      :visible.sync="editUserFormVisible"
      @close="cancelForm2"
    >
      <el-form
        :model="form2"
        :rules="rules"
        ref="form2"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form-item
          label="用户名"
          prop="displayname"
        >
          <el-input v-model="form2.displayname"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click.native="editUserFormVisible=false">取 消</el-button>
        <el-button
          type="primary"
          @click.native="saveForm2"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { userList, newUser, editUser, deleteUser } from '@/api/user'
import {errorMessage} from '@/utils/helpers'
export default {
  data () {
    return {
      search: {
        username: '',
        pagesize: 10,
        currentpage: 1,
        total: 0
      },
      form: {
        username: '',
        displayname: '',
        password: ''
      },
      form2: {
        displayname: ''
      },
      newUserFormVisible: false,
      editUserFormVisible: false,
      loading: false,
      users: [],
      rules: {
        username: [
          {
            required: true,
            message: '请输入登录名',
            trigger: 'blur'
          }
        ],
        displayname: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    fetch () {
      this.loading = true
      userList(this.search)
        .then(response => {
          const data = response.data
          this.users = data.list
          this.search.total = data.total
          this.loading = false
        })
        .catch(err => {
          this.loading = false
          this.$message({
            type: 'error',
            message: errorMessage(err, '刷新失败')
          })
        })
    },
    cancelForm () {
      this.$refs.form.resetFields()
      this.newUserFormVisible = false
    },
    cancelForm2 () {
      this.$refs.form2.resetFields()
      this.editUserFormVisible = false
    },
    saveForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          newUser(this.form)
            .then(() => {
              this.cancelForm()
              this.$message({
                type: 'success',
                message: '新增成功'
              })
              this.fetch()
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: errorMessage(err, '保存失败')
              })
            })
        }
      })
    },
    saveForm2 () {
      this.$refs.form2.validate(valid => {
        if (valid) {
          editUser(this.form2.id, this.form2)
            .then(() => {
              this.cancelForm2()
              this.$message({
                type: 'success',
                message: '修改成功'
              })
              this.fetch()
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: errorMessage(err, '保存失败')
              })
            })
        }
      })
    },
    editUser (user) {
      this.form2.id = user.id
      this.form2.displayname = user.displayname
      this.editUserFormVisible = true
    },
    deleteUser (user) {
      this.$confirm(
        `确定删除用户 ${
          user.username
        } 吗？`,
        '提示',
        {
          type: 'warning'
        }
      )
        .then(() => {
          deleteUser(user.id).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.fetch()
          })
        })
        .catch(err => {
          this.$message({
            type: 'error',
            message: errorMessage(err, '删除失败')
          })
        })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.fetch()
    })
  }
}
</script>
<style lang="stylus" scoped>
.el-row {
  margin-left: 1px;
  margin-bottom: 1px;

  .el-button {
    margin-left: 0;
  }
}

.el-pagination {
  padding: 0 1px;
  background-color: #fff;
  border: solid #eaeef5 1px;
  border-top: none;
}
</style>
